<%@taglib uri="/struts-tags" prefix="s" %>
<html>
<head>
<title>Locality Edit Page</title>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var geocoder;
var map;
var marker;
var lat = 19.0176147;
var lng = 72.85616440000001;
<s:if test="localityDto.latitude neq null">
	lat=<s:property value="localityDto.latitude"/>;
</s:if>
<s:if test="localityDto.longitude neq null">
	lng=<s:property value="localityDto.longitude"/>;
</s:if>


  function initialize() {
   geocoder = new google.maps.Geocoder();
  
    var latlng = new google.maps.LatLng(lat, lng);
    var myOptions = {
      zoom: 14,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
    marker = new google.maps.Marker({
        position: latlng, 
        map: map,
        draggable:true,
        title:"Hello World!"
    });
<!--	google.maps.event.addListener(marker, 'dragend', function() {-->
<!--		setLatLong(marker);-->
<!--	});-->
  }
  
  	function setThisCoordinate(){
  		$('#lat').val(marker.position.lat());
		$('#long').val(marker.position.lng());
  	}
  
    function codeAddress() {
    var address = $('#address').val();
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        marker.position=results[0].geometry.location;
<!--        setLatLong(marker);-->
        google.maps.event.addListener(marker, 'dragend', function() {
<!--		setLatLong(marker);-->
	});
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }
  
  
$(document).ready(function(){
	initialize();
	});
</script>

</head>
<body >
<div align="center" class="crud">
<div style="float:left;width:420px;">
<s:form action="LocalityCrudAction.html?action=save">
	<table>
	<tr>
	<s:hidden name="localityDto.id"></s:hidden>
		<td>Locality Name</td>
		<td><s:textfield name="localityDto.name"></s:textfield></td>
	</tr>
	<tr>
		<td>Alias</td>
		<td><s:textfield name="localityDto.alias"></s:textfield></td>
	</tr>
	<tr>
		<td>Latitude</td>
		<td><s:textfield name="localityDto.latitude" id="lat"></s:textfield></td>
	</tr>
	<tr>
		<td>Longitude</td>
		<td><s:textfield name="localityDto.longitude" id="long"></s:textfield></td>
	</tr>
	<tr>
	<td>Select City</td>
	<td>
		<s:select list="cities" listKey="id" listValue="name" name="localityDto.cityId" headerKey="-1" headerValue=""></s:select>
	</td>
	</tr>
	<tr>
	<td>Select Parent Locality</td>
	<td>
		<s:select list="localities" listKey="id" listValue="name" name="localityDto.parentLocalityId" headerKey="-1" headerValue=""></s:select>
	</td>
	</tr>
	<tr>
	<td>
		<a href="javascript:void(0);" class="saveButton" onclick="$(this).parents('form:first').submit();"></a>
	</td>
	</tr>
	</table>
</s:form>
</div>
<div id="map_canvas" style="width:600px; height:380px;float:left"></div>
  <div>
    <input id="address" type="textbox" value="Mumbai, India">
    <input type="button" value="Find"  onclick="codeAddress()">
    <input type="button" value="Set"  onclick="setThisCoordinate()">
  </div>
</div>

</body>
</html>